<template>
    <div >
      <div>
        请选择医院：<el-select v-model="oHospital" placeholder="请选择" @change="hoschange()">
                    <el-option
                      v-for="item in oHospitall"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                  <el-button type="primary" @click="addDevice()">添加设备</el-button>
                  <el-button type="primary" @click="ingEquipment()">打印设备条码</el-button>
      </div>
      <div>
           <table  style="width:20%;float:left;" class="tableIs" v-if="arrTorF1">
              <tr v-for="(temp,index) in categoryArr1">
                  <td>
                    {{temp.columns.name}}
                    
                     <el-button  v-if="index!=0" @click="delte(temp.columns.id)">删除</el-button>
                    
                  </td>
              </tr>
          </table>
          <table  style="width:20%;float:left;" class="tableIs" v-if="arrTorF2">
              <tr v-for="(temp,index) in categoryArr2">
                  <td>
                    {{temp.columns.name}}
                    
                     <el-button  v-if="index!=0" @click="delte(temp.columns.id)" >删除</el-button>
                    
                  </td>
              </tr>
          </table>
          <table  style="width:20%;float:left;" class="tableIs" v-if="arrTorF3">
              <tr v-for="(temp,index) in categoryArr3">
                  <td>
                    {{temp.columns.name}}
                    
                     <el-button  v-if="index!=0" @click="delte(temp.columns.id)">删除</el-button>
                    
                  </td>
              </tr>
          </table>
          <table  style="width:20%;float:left;" class="tableIs" v-if="arrTorF4">
              <tr v-for="(temp,index) in categoryArr4">
                  <td>
                    {{temp.columns.name}}
                    
                     <el-button  v-if="index!=0" @click="delte(temp.columns.id)">删除</el-button>
                    
                  </td>
              </tr>
          </table>
          <table  style="width:20%;float:left;" class="tableIs" v-if="arrTorF5">
              <tr v-for="(temp,index) in categoryArr5">
                  <td>
                    {{temp.columns.name}}
                    
                     <el-button  v-if="index!=0" @click="delte(temp.columns.id)">删除</el-button>
                    
                  </td>
              </tr>
          </table>
          <table  style="width:20%;float:left;" class="tableIs" v-if="arrTorF6">
              <tr v-for="(temp,index) in categoryArr6">
                  <td>
                    {{temp.columns.name}}
                    
                     <el-button  v-if="index!=0" @click="delte(temp.columns.id)">删除</el-button>
                    
                  </td>
              </tr>
          </table>
         

        
          
      </div>

         <el-dialog title="添加设备" :visible.sync="dialogFormVisible">
          <div>
            请选择设备：<el-select v-model="equipment" placeholder="请选择" >
                        <el-option
                          v-for="item in equipmentArr"
                          :key="item.columns.id"
                          :label="item.columns.name"
                          :value="item.columns.id">
                        </el-option>
                      </el-select>

                      请输入设备名称：<el-input
                        placeholder="请输入设备名称"
                        v-model="equipmentName"
                        clearable>
                      </el-input>
          </div>
          <div slot="footer" class="dialog-footer" style="text-align: right; margin: 0">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="Determiadd()">确 定</el-button>
          </div>
        </el-dialog>

    </div>
</template>

<script>
  import http from '../../../api/http'
import constants from '../../../commons/constants'
  export default {
    name: 'hello',
    data () {
      return {
        equipmentName:'',
        thatiD:'',
        equipment:'',
        equipmentArr:[],
        dialogFormVisible:false,
        thatID:"",
        oHospital:'',
        oHospitall:[],
        categoryArr1:[],
        categoryArr2:[],
        categoryArr3:[],
        categoryArr4:[],
        categoryArr5:[],
        categoryArr6:[],
        arrTorF1:false,
        arrTorF2:false,
        arrTorF3:false,
        arrTorF4:false,
        arrTorF5:false,
        arrTorF6:false,
        server: constants.server,
      }
    },

    methods: {
      comeOn(){
        var vm = this;
        
        http.postData(vm,'/pt/site/list',{},function (resp) {
          if(resp.body.code="111"){
            vm.oHospitall=resp.body.value;
          }else{
            alert("失败");
          }
          

        })
      },
      hoschange(){

        var vm = this;

        http.postData(vm,'/pt/qrBarCodeValide/getDevice',{id:vm.oHospital},function (resp) {
            vm.categoryArr1=resp.body[0];
            vm.categoryArr6=resp.body[5];
            vm.categoryArr5=resp.body[4];
            vm.categoryArr4=resp.body[3];
            vm.categoryArr3=resp.body[2];
            vm.categoryArr2=resp.body[1];
           if(resp.body.length==1){
            vm.arrTorF1=true;
           }else if(resp.body.length==2){
            vm.arrTorF1=true;
            vm.arrTorF2=true;
           }else if(resp.body.length==3){
            vm.arrTorF1=true;
            vm.arrTorF2=true;
            vm.arrTorF3=true;
           }else if(resp.body.length==4){
            vm.arrTorF1=true;
            vm.arrTorF2=true;
            vm.arrTorF3=true;
            vm.arrTorF4=true;
           }else if(resp.body.length==5){
            vm.arrTorF1=true;
            vm.arrTorF2=true;
            vm.arrTorF3=true;
            vm.arrTorF4=true;
            vm.arrTorF5=true;
           }else if(resp.body.length>=6){
            vm.arrTorF1=true;
            vm.arrTorF2=true;
            vm.arrTorF3=true;
            vm.arrTorF4=true;
            vm.arrTorF5=true;
            vm.arrTorF6=true;
           }else{
            vm.arrTorF1=false;
            vm.arrTorF2=false;
            vm.arrTorF3=false;
            vm.arrTorF4=false;
            vm.arrTorF5=false;
            vm.arrTorF6=false;
           }
            
          




        })
      },
      delte(id){
        var vm = this;
        vm.thatiD=id;
          this.$confirm('此操作将删除该设备, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                 http.postData(vm,'/pt/qrBarCodeValide/delDevice',{id:vm.thatiD},function (resp) {
                        if(resp.body.code=="111"){
                            
                             http.postData(vm,'/pt/qrBarCodeValide/getDevice',{id:vm.oHospital},function (resp) {
                                    vm.categoryArr1=resp.body[0];
                                    vm.categoryArr6=resp.body[5];
                                    vm.categoryArr5=resp.body[4];
                                    vm.categoryArr4=resp.body[3];
                                    vm.categoryArr3=resp.body[2];
                                    vm.categoryArr2=resp.body[1];
                                   if(resp.body.length==1){
                                    vm.arrTorF1=true;
                                   }else if(resp.body.length==2){
                                    vm.arrTorF1=true;
                                    vm.arrTorF2=true;
                                   }else if(resp.body.length==3){
                                    vm.arrTorF1=true;
                                    vm.arrTorF2=true;
                                    vm.arrTorF3=true;
                                   }else if(resp.body.length==4){
                                    vm.arrTorF1=true;
                                    vm.arrTorF2=true;
                                    vm.arrTorF3=true;
                                    vm.arrTorF4=true;
                                   }else if(resp.body.length==5){
                                    vm.arrTorF1=true;
                                    vm.arrTorF2=true;
                                    vm.arrTorF3=true;
                                    vm.arrTorF4=true;
                                    vm.arrTorF5=true;
                                   }else if(resp.body.length>=6){
                                    vm.arrTorF1=true;
                                    vm.arrTorF2=true;
                                    vm.arrTorF3=true;
                                    vm.arrTorF4=true;
                                    vm.arrTorF5=true;
                                    vm.arrTorF6=true;
                                   }else{
                                    vm.arrTorF1=false;
                                    vm.arrTorF2=false;
                                    vm.arrTorF3=false;
                                    vm.arrTorF4=false;
                                    vm.arrTorF5=false;
                                    vm.arrTorF6=false;
                                   }
                                    
                                   vm.$message({
                                      type: 'success',
                                      message: '删除成功!'
                                    });




                                })
                        }else{
                           vm.$message({
                                type: 'warning',
                                message: '删除失败!'
                              });
                        }
                       

                })
              }).catch(() => {
                      
              });
        
      },
      addDevice(){
        var vm=this;
        if(vm.oHospital!=''){
            vm.dialogFormVisible=true;

              http.postData(vm,'/pt/qrBarCodeValide/getDeviceType',{id:vm.oHospital},function (resp) {
                  vm.equipmentArr=resp.body;
                  console.log(resp.body)
                  

              })
        }else{
          vm.$message({
            message: '请选择医院',
            type: 'warning'
          });
        }
        
      },
      Determiadd(){
        // 确定添加设备按钮
        var vm=this;
        http.postData(vm,'/pt/qrBarCodeValide/addDevice',{siteId:vm.oHospital,id:vm.equipment,name:vm.equipmentName},function (resp) {
                  console.log(resp)
                  if(resp.body.code=="111"){
                    vm.dialogFormVisible = false;
                    vm.$message({
                        type: 'success',
                        message: '添加成功!'
                      });
                      http.postData(vm,'/pt/qrBarCodeValide/getDevice',{id:vm.oHospital},function (resp) {
                            vm.categoryArr1=resp.body[0];
                            vm.categoryArr6=resp.body[5];
                            vm.categoryArr5=resp.body[4];
                            vm.categoryArr4=resp.body[3];
                            vm.categoryArr3=resp.body[2];
                            vm.categoryArr2=resp.body[1];
                           if(resp.body.length==1){
                            vm.arrTorF1=true;
                           }else if(resp.body.length==2){
                            vm.arrTorF1=true;
                            vm.arrTorF2=true;
                           }else if(resp.body.length==3){
                            vm.arrTorF1=true;
                            vm.arrTorF2=true;
                            vm.arrTorF3=true;
                           }else if(resp.body.length==4){
                            vm.arrTorF1=true;
                            vm.arrTorF2=true;
                            vm.arrTorF3=true;
                            vm.arrTorF4=true;
                           }else if(resp.body.length==5){
                            vm.arrTorF1=true;
                            vm.arrTorF2=true;
                            vm.arrTorF3=true;
                            vm.arrTorF4=true;
                            vm.arrTorF5=true;
                           }else if(resp.body.length>=6){
                            vm.arrTorF1=true;
                            vm.arrTorF2=true;
                            vm.arrTorF3=true;
                            vm.arrTorF4=true;
                            vm.arrTorF5=true;
                            vm.arrTorF6=true;
                           }else{
                            vm.arrTorF1=false;
                            vm.arrTorF2=false;
                            vm.arrTorF3=false;
                            vm.arrTorF4=false;
                            vm.arrTorF5=false;
                            vm.arrTorF6=false;
                           }
                            

                        })
                  }else{
                    vm.$message({
                      message:resp.body.msg,
                      type: 'warning'
                    });
                  }
                  

              })
      },
      ingEquipment(){
        var vm=this;
        if(vm.oHospital!=''){
            http.postData(vm,'/pt/qrBarCodeValide/print',{siteId:vm.oHospital},function (resp) {
              console.log(resp)
              if (resp.body.code === '111') {
              var cList = resp.body.value;
                  var printHtml = "<button onclick='this.style.display=\"none\";window.print();window.close();' style='font-size: 1.3rem;color: white;background-color:red;'>请确认条码完全加载后再点击打印</button>" +
                  "<ul class=\"tagList\">\n";
                
                if(cList!=undefined&&cList!=null&&cList.length>0) {
                  for(var j=0;j<cList.length;j++) {
                    var item=cList[j];
                    printHtml +=
                      "<li v-for=\"item in cList\">\n" +
                      "     <img src=\"" + vm.server + "/createBarCode/"+item.columns.num+"\">\n" +
                      // "     <div>SubjectId:"+vm.subjectNum+"</div>\n" +
                      "     <div>"+item.columns.name+"</div>\n" +
                      // +(item.pkTime!=undefined&&item.pkTime!=null&&item.pkTime!=''?('PKTime:'+item.pkTime+'&nbsp;'):'')
                      // "     <div>"+item.name+vm.projectNum+"</div>" +
                      // "     <div>"+vm.projectNum+"</div>\n" +
                      "</li>\n";
                  }
                }
                printHtml+="</ul><style>\n" +
                    " body{padding:0px;} " +
                    // " .isImg{float:left;margin-right:3mm;} " +
                    // " .isdiv{float:left;margin-top:2mm;} " +
                    // " .tagList .isLi{width:140mm;} " +
                    ".tagList li * {font-size:0.2rem;padding:0px;}\n" +
                    "  .tagList li {list-style: none;width:30mm;height:15mm;margin-left:-10mm;word-break: normal;padding:0.1mm;text-align:center;font-size:8px;}\n" +
                    "  .tagList li img {width:25mm;height:10mm;margin-left:-2mm;}" +
                    "@media screen {"+
                    "  .tagList li img {width:25mm;height:10mm;margin-left:-2mm;}" +
                    "  }" +
                    "  @media print {\n" +
                    "    .tagList li {\n" +
                    "      width: 40mm;\n" +
                    "      height:20mm;\n" +
                    "      page-break-after:always;\n" +
                    "      word-break: normal;" +
                    "      padding:0.1mm;" +
                    "      text-align:center;" +
                    "    }\n" +
                    "  .tagList li img {width:25mm;height:10mm;margin-left:-2mm;}" +
                    "  }</style>";
                  var wid = window.open('blank', '_blank', 'width=100px');
                  wid.document.write(printHtml);
              } else {
                return false
              }

           })
           

        }else{
          vm.$message({
            message: '请选择医院',
            type: 'warning'
          });
        }
      }
     
     
    },
    mounted(){
      this.comeOn();
      


    }
  }
  </script>
<style scoped>
.oneChart{
  width:900px;
  border:1px solid #79c4a5;
  margin: 0 auto;
  margin-top: 20px;
}
.popoverR{
  position: absolute;
}
.tableIs td{
  border:1px solid #dfe6ec;
  text-align: center;
  padding: 10px 0;
}
.tableIs{
  margin-top: 10px;
  border-collapse:collapse;
}
.tableIs tr:first-of-type{
  font-size: 20px;
  background-color: #eef1f6;
}
.el-button--default{
  padding: 5px 10px;
  font-size: 12px;
}
</style>
